<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../Images/font/iconfont.css">
    <link rel="stylesheet" href="../css/enroll.css">
</head>

<body>
    <!-- 头部开始 -->
    <header class="mall-header">
        <div class="header-top">
            <div class="header-topbar">
                <div class="topbar-user">
                    <a href="../html/login.html">登录</a>
                    &nbsp;或 &nbsp;
                    <a href="javascript:;">注册</a>
                    &nbsp;ANTA会员
                </div>
                <div class="topbar-cart">
                    <a href="javascript:;" class="iconfont icon-gouwuche">
                    </a>
                </div>
                <div class="topbar-service">
                    <a href="javascript:;" class="iconfont icon-erji"></a>
                </div>
                <div class="topbar-en">EN</div>
            </div>
        </div>
        <div class="header-nav">
            <div class="center">
                <div class="header-logo">
                    <div class="logo-inner">
                        <a href="../html/index.html"><img src="../Images/10005.svg" alt=""></a>
                    </div>
                </div>
            </div>
            <ul class="header-list">
                <li> <a href="javascript:;"><b>冬奥国旗款</b></a>
                </li>
                <li><a href="javascript:;"><b>男子</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>运动鞋</li>
                                    <li>跑鞋</li>
                                    <li>篮球鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>户外综训鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>套头卫衣</li>
                                    <li>外套夹克</li>
                                    <li>羽绒服/马甲</li>
                                    <li>短袖T恤</li>
                                    <li>长裤</li>
                                    <li>运动短裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                    <li>运动袜子</li>
                                </ul>
                                <ul>
                                    <li><b>运动项目</b></li>
                                    <li>跑步</li>
                                    <li>篮球</li>
                                    <li>综训</li>
                                    <li>生活</li>
                                    <li>健身</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>女子</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>跑鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>棉鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>羽绒服</li>
                                    <li>套头卫衣</li>
                                    <li>外套、夹克</li>
                                    <li>长裤</li>
                                    <li>短袖T恤</li>
                                    <li>运动短裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                    <li>运动袜类</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>儿童安踏</b></a>
                    <div class="layle">
                        <div class="list-center">
                            <section>
                                <ul>
                                    <li>新品上市</li>
                                    <li>男中大童</li>
                                    <li>女中大童</li>
                                    <li>男小童</li>
                                    <li>女小童</li>
                                    <li>婴童</li>
                                </ul>
                                <ul>
                                    <li><b>所有鞋类</b></li>
                                    <li>跑鞋</li>
                                    <li>篮球鞋</li>
                                    <li>休闲鞋</li>
                                    <li>板鞋</li>
                                    <li>足球鞋</li>
                                </ul>
                                <ul>
                                    <li><b>所有服装</b></li>
                                    <li>套头卫衣</li>
                                    <li>羽绒服</li>
                                    <li>短袖T恤</li>
                                    <li>运动短裤</li>
                                    <li>长裤</li>
                                </ul>
                                <ul>
                                    <li><b>所有配件</b></li>
                                    <li>包类</li>
                                </ul>
                            </section>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;"><b>儿童</b></a>
                </li>
                <li><a href="javascript:;"><b>品牌文化</b>
                    </a></li>
                <li><a href="javascript:;"><b>观赏视频</b>
                    </a></li>
                <li><a href="javascript:;"><b>联系我们</b>
                    </a></li>
                <li class="nav-item last">
                    <div class="nav-search-box">
                        <a href="javascript:;" class="nav-search-btns"><img src="../Images/10007.svg" alt=""></a>
                        <input type="text" placeholder="搜索">
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!-- 头部结束 -->
    <!-- 中部开始 -->
    <div class="main-container">
        <div class="banner">
            <a href="javascript:;"> <img src="../Images/10001.jpg" alt="">
                <div class="layout">
                    <div class="mainbox">
                        <div class="header-tit"></div>
                        <div class="type-box">
                            <div class="type-inner">
                                <a href="javascript:;" class="active">手机注册</a>
                                <a href="javascript:;" class="toggle">邮箱注册</a>
                            </div>
                        </div>
                        <div class="username">
                            <h5>&nbsp;&nbsp;请输入手机号码注册:
                            </h5>
                            <input type="text" placeholder="&nbsp;&nbsp;手机号码" class="phone"><span class="user"></span>
                            <input type="password" placeholder="&nbsp;&nbsp;密码" class="tu">
                            <div class="laybel">
                                <div class="box"><input type="checkbox" name="agree" id="agree-check">我已充分阅读、理解并接受</div>
                                <a href="#">个人信息保护政策</a>
                                <span> 的全部内容</span>
                            </div>
                            <div class="fixed">
                                <input type="text" class="btns" value="确认">
                            </div>
                        </div>
                        <div class="emile none">
                            <h5>&nbsp;&nbsp;请输入邮箱地址注册:</h5>
                            <input type="text" placeholder="&nbsp;&nbsp;邮箱地址" class="phone">
                            <input type="text" placeholder="&nbsp;&nbsp;登录密码" class="login">
                            <input type="text" id="txt6" placeholder="&nbsp;&nbsp;图片验证码" class="tu">
                            <div class="laybel">
                                <div class="box"><input type="checkbox" name="agree" id="agree-check">我已充分阅读、理解并接受</div>
                                <a href="#">个人信息保护政策</a>
                                <span> 的全部内容</span>
                            </div>
                            <div class="fixed">
                                <input type="text" class="btns" value="确认">
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <!-- 中部结束 -->
    <!-- 尾部开始 -->
    <div class="footer">
        <div class="footer-main">
            <div class="footer-center">
                <div class="main-logo">
                    <img src="../Images/10002.svg" alt="">
                </div>
                <div class="main-ft">
                    <div class="service-one">
                        <h4>
                            在线客服
                            <span><img src="../Images/10006.svg" alt=""></span>
                        </h4>
                        <h4>
                            在线资讯
                            <span>400-858-2020</span>
                        </h4>
                    </div>
                    <div class="service-two">
                        <img src="../Images/10003.jpg" alt="">
                    </div>
                </div>
                <div class="company">
                    <p>Copyright(C) 2012-2020 by www.ANTA.cn&nbsp;&nbsp;
                        &copy;安踏体育用品有限公司版权所有&nbsp;&nbsp;营业执照&nbsp;&nbsp;开户许可证&nbsp;&nbsp;个人信息保护政策</p>
                    <span>闽ICP备2021011550号-2nbsp;&nbsp;闽公网安备35020302033806号</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 侧边导航 -->
    <div class="web-cover"></div>
    <!-- 尾部结束 -->
</body>

</html>
<script src="../Images/js/jquery.min.js"></script>
<script src="../Images/js/swiper-bundle.min.js"></script>
<script>
    //回到顶部
    $(".web-cover").on("click", function () {
        $("html,body").animate({  // 让body和html回到顶部
            scrollTop: 0
        }, 800)
    })
    //注册验证换背景图颜色

    $('.mainbox').on('click', '.toggle', function () {
        console.log($(this));
        $('.username').css('display', 'none')
        $('.active').css({ 'background': '#bbb', 'color': '#fff' })
        $('.emile').css('display', 'block')
        $('.toggle').css('background', 'black')
    })
    $('.mainbox').on('click', '.active', function () {
        console.log($(this));
        $('.username').css('display', 'block')
        $('.active').css('background', 'black')
        $('.emile').css('display', 'none')
        $('.toggle').css({ 'background': '#bbb', 'color': '#fff' })
    })

    // 注册验证

    let flag = false;
    $(".phone").on("blur", function () {
        $.get("../Images/php/checkUser.php", { "username": $(".phone").val() }, function (data) {
            if (data.trim() == "1") {
                $(".phone").next().html("√").css("color", "green")
                flag = true;
            }
            if (data.trim() == "0") {
                $(".phone").next().html("X").css("color", "red")
            }
        })
    })

    $(".btns").on("click", function () {
        $.post('../Images/php/addUser.php', { "username": $(".phone").val(), "userpass": $(".tu").val() }, function (data) {
            if (flag) {
                if (data.trim() == "success") {
                    alert("注册成功")
                    location.href = "./index.html"
                }
                if (data.trim() == "fail") {
                    alert("注册失败")
                }

            }
        })
    })
</script>